
<template>
  <el-container>
    <el-header>
      <el-menu
          :default-active="activeIndex"
          class="HomeChoose"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          router
      >
        <el-menu-item index="0">
          <img
              style="width: 60px"
              src="@/logo.png"
              alt="SC logo"
          />
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="home"><el-icon><House /></el-icon>首页</el-menu-item>
        <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name" >
          <template #title><el-icon><component :is="item.icon"></component></el-icon>
            <span>{{item.name}}</span></template>
          <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name" >
            <el-icon><component :is="child.icon"></component></el-icon>{{child.name}}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="announcement"><el-icon><Help /></el-icon>我的消息</el-menu-item>
        <el-menu-item index="3"><el-icon><Phone /></el-icon>联系我们</el-menu-item>

        <div class="IDpicture">
          <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
            <template #suffix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
          <el-avatar @click="ToHome()"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </div>
      </el-menu>
    </el-header>
    <el-main>

        <div class="block text-center" >
          <el-carousel height="400px" motion-blur>
            <el-carousel-item v-for="item in 4" :key="item">
<img src="@/shouye1.jpg" class="carousel-image">
            </el-carousel-item>
          </el-carousel>
        </div>
      <div style="display: flex">
      <div class="jianjie" style="margin-top: 60px; display: flex;">
          <img src="@/shouye1.jpg" style="width: 250px;height:200px">
        <div style="margin-left: 20px">
        <h4 style="margin-top: 20px">社区简介</h4>
        <p style="width: 400px;margin-top: 20px">【智慧社区】一个引领未来生活方式的智慧型社区。作为智慧城市理念的前沿实践者，我们不仅提供高品质的居住空间，更融合尖端科技与绿色环保理念，构建了一个安全、便捷、互动、可持续的生活环境。</p>
        </div>
      </div>
      <div class="hezuo" style="margin-top: 60px; display: flex;">
        <img src="@/shouye1.jpg" style="width: 250px;height:200px">
        <div style="margin-left: 20px">
          <h4 style="margin-top: 20px">相关合作</h4>
          <p style="width: 400px;margin-top: 20px">我们深知构建理想智慧社区离不开各界伙伴的精诚合作与创新支持。为了持续优化居民生活品质，推动社区智能化进程，我们诚邀以下领域的合作伙伴，共同开启智慧生活的新篇章。</p>
        </div>
      </div>
      </div>
      <el-divider style="margin-top: 120px" />
    </el-main>
    <el-footer>
      <div class="footer-text">
        <p>©2024 XXXX公司所有｜XX网安备00000000000000｜XICP备2024000000号-0</p>
      </div>
    </el-footer>
  </el-container>

</template>

<script setup>
import { ref } from 'vue'
import { ElInput, ElIcon } from 'element-plus';
import { Search } from '@element-plus/icons';
import{useRouter}from 'vue-router';

const menu_data=ref([
  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/index/Shopping',
    child:[
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/Order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },
])
const activeIndex = ref('1')

const handleClick = (row) => {
  console.log(row);
};
const router = useRouter();
const ToHome=()=> {
  router.push('/login');
}
</script>
<style scoped>

.el-header {
  flex: 0 0 10%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  padding: 0 0px; /* 添加内边距以防止内容贴近边缘 */
}


.el-footer {
  flex: 0 0 10%; /* footer占据10%高度，且不缩放 */
  line-height: 1; /* 同上 */
  display: flex;
  justify-content: center; /* 水平居中 */
}
.el-main{
  flex: 1;
}
.el-main {
  flex: 1; /* main占据剩余空间 */
  padding: 20px; /* 添加内边距 */
}
.searchFunction{
  height: 28px;
  width: 80%;
  right: 40px;
}
/*头部边框阴影*/
.HomeChoose{
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0,0,0,0.1);
  display: flex;
}
.flex-grow {
  flex-grow: 0;
}
.IDpicture{
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%;/* 调整左右内边距 */
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.carousel-image {
  /* 设置图片宽度和高度为100%，以填满轮播项容器 */
  width: 100%;
  height: 100%;
  /* object-fit属性控制图片如何填充容器，cover保证图片完全覆盖容器并保持原图宽高比 */
  object-fit: cover;
  /* 可选：隐藏可能因图片比例与容器不同导致的多余部分 */
  object-position: center;
}
.jianjie{
  margin-left: 50px;
  width: 700px;
  height: 200px;
  border-width: 1px;
  border-style: groove;
  border-color:#cccccc;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3)
}
.hezuo{
  margin-left: 100px;
  width: 700px;
  height: 200px;
  border-width: 1px;
  border-style: groove;
  border-color:#cccccc;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3)
}
</style>